<html>
    <head>
    <link rel="stylesheet" type="text/css" href="markdown.css">
    <script type="text/javascript" src="markedv2.min.js"></script>
    <script type="text/javascript" src="qwebchannel.js"></script>
    <script type="text/javascript" src="mermaid.js"></script>
    <script type="text/javascript" src="highlight.min.js"></script>
    <link rel="stylesheet" type="text/css"  href="atom-one-dark.min.css">
    </head>
    <body>
        <div id="markdown_content">
            <h1> Hello GGG </h1>
        </div>
        <script>
        'use strict';
        // marked
        marked.use({
            renderer: {
                code(code, language) {
                    if (language == 'mermaid'
                        || code.match(/^flowchart/)
                        || code.match(/^sequenceDiagram/)
                        || code.match(/^classDiagram/)
                        || code.match(/^stateDiagram/)
                        || code.match(/^erDiagram/)
                        || code.match(/^journey/)
                        || code.match(/^gantt/)
                        || code.match(/^pie/)
                        || code.match(/^requirementDiagram/)
                        || code.match(/^graph/)
                    ) {
                        return mermaid.mermaidAPI.render('mermaid_' + Date.now(), code);
                    } else {
                        return '<pre><code>' + code + '</code></pre>';
                    }
                },
                heading(text, level) {
                    const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
                    return `
                        <h${level} class="ui header">
                          ${text}
                        </h${level}>`;
                }
            },
            highlight: function (code, lang) {
                const hljs = require('highlight.js');
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                return hljs.highlight(code, {language}).value;
            },
            langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
            pedantic: false,
            gfm: true,
            breaks: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            xhtml: false
        });
        mermaid.mermaidAPI.initialize({
                startOnLoad: false
            });
        var markdown_content = document.getElementById('markdown_content');

        var updateText = function(text) {

            markdown_content.innerHTML = marked(text);
            hljs.highlightAll();
        }

            new QWebChannel(qt.webChannelTransport,
              function(channel) {
                var content = channel.objects.content;
                updateText(content.text);
                content.textChanged.connect(updateText);
              }
            );
        </script>
    </body>
</html>
